<template>
<van-nav-bar
  :title="findResult.nm"
  left-text="返回"
  left-arrow
  @click-left="$router.back()"
/>
  <div class="video-wrapper">
    <video
      webkit-playsinline="true"
      x-webkit-airplay="true"
      playsinline=""
      x5-video-player-type="h5"
      x5-video-player-fullscreen="true"
      preload="auto"
      t7-video-player-type="inline"
      id="video"
      class="video-box hide"
      :src='findResult.videourl'
      :poster="findResult.img"
      alt=""
      controls
      autoplay
    ></video>
  </div>
</template>

<script>
import { getHomeHotAPI } from '@/api/movie.js'
export default {
  data(){
    return{
      id:this.$route.params.id,
      findResult:{},
    }
  },
  created(){
    this.getMovieFun()
  },
  methods:{
    async getMovieFun(){
       const { data: res } = await getHomeHotAPI();
       this.findResult=res.hot.find(x=>x.id==this.id)
       console.log(this.findResult)
    }
  }
}
</script>


<style lang="less" scoped>
.van-nav-bar {
  background: #000;
}
.van-nav-bar /deep/ .van-ellipsis {
  color: #fff !important;
}
.van-nav-bar /deep/ .van-nav-bar__text {
  color: #fff;
}
.van-nav-bar /deep/ .van-icon {
  color: #fff;
}
.video-wrapper {
  position: relative;
  width:calc(100vw);
  height:calc(100vh - var(--van-nav-bar-height));
  background-color: #eee;
}
.video-wrapper .video-box {
  width: 100%;
  height: 100%;
  background-color: #000;
}
.video-wrapper video {
  object-fit: contain;
}

</style>
